<template>
    <div class="common-size device_value">
        <page-head :pageHead="pageHeadData"></page-head>
        <div class="page-content">
            <div class="page-chart page-chart2">
                <div ref="useAgeLimitDom" class="chart-box">

                </div>
                <div class="y-name line-name">设备数量(台)</div>
                <div class="x-name line-name">设备价值(万元)</div>
            </div>
            <div class="describe_box">
                <div class="describe-text" v-html="item" v-for="(item, index) in textData">
                </div>
            </div>
        </div>
        <page-footer :pageFooter="pageFooterData"></page-footer>
    </div>
</template>

<script>
  import pageHead from './pageHead.vue'
  import PageFooter from "./pageFooter.vue";
  import {nuxtMixins} from '../assets/javascript/mixin'
  let echarts = require('echarts')
  import echartsConfig from '@/assets/javascript/echartsConfig'
  export default {
    name: 'device_value',
    props:['chartData'],
    mixins: [nuxtMixins],
    data() {
      return {
        pageTitle: '设备价值分析',
        detailTitle: '设备价值分析'
      }
    },
    computed:{
      oneRemarkData () {
        return this.chartData.remark
      },
      chartDataTable () {
        return this.chartData.chartData
      },
      textData () {
        return this.chartData.textData
      }
    },
    created() {
    },
    mounted() {
      this.ageLimitChart()
    },
    methods: {
      ageLimitChart () {
        if (!this.chartData) {
          return false
        }
        if (!this.chartData.chartData) {
          return false
        }
        const  ageLimitData = this.chartData.chartData
        const option = {
          title: {
            show: true,
            text: '设备价值分析',
            left: 'center',
            bottom: '5%',
            textStyle: {
              color: '#666',
              fontWeight: 400,
              fontSize: echartsConfig.titleFontSize || 14
            }
          },
          backgroundColor: '#fff',
          xAxis: {
            type: 'category',
            boundaryGap : false,
            splitLine: {
              show: true,
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            },
            axisLabel: {
              textStyle: {
                color:'#989898'
              }
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(247,248,248,0.5)', 'rgba(0,0,0,0)'],
              }
            },
            data: ageLimitData.x_data
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '15%',
            containLabel: true
          },
          yAxis: {
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#989898'
              }
            },
            axisLine: {
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            }
          },
          series: [
            {
              name: '3的指数',
              type: 'line',
              symbolSize: 8,
              itemStyle: {
                normal: {
                  borderWidth: 4,
                  borderColor:'#3B70B7'
                }
              },
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color:'#3B70B7',
                    fontWeight: 'bolder'
                  }
                }
              },
              lineStyle: {
                normal: {
                  color: '#3B70B7',
                  width: 3
                }
              },
              areaStyle: {
                normal: {
                  color:{
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: 'rgba(59,112,183, 0.6)' // 0% 处的颜色
                    }, {
                      offset: 1, color: 'rgba(59,112,183, 0.1)' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  }
                }
              },
              data: ageLimitData.y_data
            }
          ]
        };
        this.ageLimitEchart = echarts.init(this.$refs.useAgeLimitDom)
        this.ageLimitEchart.setOption(option)
      }
    },
    components: {
      PageFooter,
      pageHead
    }
  }
</script>

<style lang="scss">
    .device_value {
        .page-content {
            margin-top: 10px;
            .page-chart {
                margin-bottom: 35px;
                position: relative;
                .chart-box {
                    width: 100%;
                    height: 100%;
                }
                .x-name {
                    position: absolute;
                    bottom: 11.5%;
                    right: 4%;
                    font-size: 12px;
                    color: #989898;
                }
                .y-name {
                    position: absolute;
                    top: 35px;
                    left: 4.3%;
                    font-size: 12px;
                    color: #989898;
                }
            }
            .describe_box {
                .describe-text {
                    text-indent:2em;
                    color: #666;
                    font-size: 18px;
                    line-height: 32px;
                    margin-bottom:10px;
                }
            }
        }
    }
</style>
